<script setup>
import { reactive, ref } from 'vue'
import { loginNetwork, registerNetwork } from '@/api' 
import { useRouter } from 'vue-router'

const router = useRouter()

let showLogin = ref(true)

// 登录
const goLogin = async () => {
  loginRef.value.validate(async (valid) => {
    if (valid) {
      // 校验通过，业务逻辑代码...

      const params = {
        username: loginModel.username,
        password: loginModel.password,
      }

      const resp = await loginNetwork(params)

      console.log(resp)

      if (resp.code == 0) {
        ElMessage('登录成功,返回首页')
        router.replace('/')
      }
    }
  })
}

// 注册
const goRegister = () => {
  // 判断所有的校验是否全部通过
  registerRef.value.validate(async (valid) => {
    if (valid) {
      // 校验通过，业务逻辑代码...

      const obj = {
        username: registerModel.username,
        password: registerModel.password,
        repassword: registerModel.repassword,
      }

      const resp = await registerNetwork(obj)

      if (resp.code == 0) {
        ElMessage('注册成功')
        showLogin.value = true
      }
    }
  })

  // console.log(registerRef.from)
}

// 登录页绑定数据对象
const loginModel = reactive({
  username: '',
  password: '',
})

// 登录页表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度2到10个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度6到15个字符', trigger: 'blur' },
  ],
}

// 登录页绑定数据对象
const registerModel = reactive({
  username: '',
  password: '',
  repassword: '',
})

const validateConfirmPwd = (rule, value, callback) => {
  if (value !== registerModel.password) {
    callback(new Error('两次密码输入不一致'))
  } else {
    callback()
  }
}

const registerRules = {
  username: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度2到10个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度6到15个字符', trigger: 'blur' },
  ],
  repassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度6到15个字符', trigger: 'blur' },
    { validator: validateConfirmPwd, trigger: 'blur' },
  ],
}

const loginRef = ref()
const registerRef = ref()


</script>

<template>
  <el-row class="container">
    <el-col :span="12" class="leftbg"></el-col>
    <el-col :span="8" :offset="2" class="right">
      <el-form
        v-if="showLogin"
        label-width="70px"
        label-position="left"
        class="form-content"
        :model="loginModel"
        :rules="loginRules"
        ref="loginRef"
      >
        <el-form-item label-width="0px">
          <h2>登录</h2>
        </el-form-item>

        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginModel.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="loginModel.password"></el-input>
        </el-form-item>

        <el-form-item label-width="0px">
          <el-button @click="goLogin">点击登录</el-button>
        </el-form-item>

        <el-form-item label-width="0px" class="bottom-check" @click="showLogin = false">
          <!-- <div @click="showLogin=false"> -->
          <img src="@/assets/icon_right_black.png" alt="" />
          <span>注册</span>
          <!-- </div> -->
        </el-form-item>
      </el-form>

      <el-form
        v-else
        label-width="80px"
        label-position="left"
        class="form-content"
        :model="registerModel"
        :rules="registerRules"
        ref="registerRef"
      >
        <el-form-item label-width="0px">
          <h2>注册</h2>
        </el-form-item>

        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerModel.username"></el-input>
        </el-form-item>

        <el-form-item label="输入密码" prop="password">
          <el-input v-model="registerModel.password"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="repassword">
          <el-input v-model="registerModel.repassword"></el-input>
        </el-form-item>

        <el-form-item label-width="0px">
          <el-button @click="goRegister">点击注册</el-button>
        </el-form-item>

        <el-form-item label-width="0px" class="bottom-check" @click="showLogin = true">
          <!-- <div @click="showLogin=false"> -->
          <img src="@/assets/icon_left_black.png" alt="" />
          <span>登录</span>
          <!-- </div> -->
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-color: #f5f5f5;

  .leftbg {
    background: url('@/assets/loginbg.jpg') no-repeat center;

    // height:100%;
    // width:50%;
    // overflow: hidden;
    // background-size: cover; //或者background-size:100%;
    background-size: 100% 100%;
    // background-attachment: fixed;

    // height: 100%;
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;

    .form-content {
      background-color: #fff;
      padding: 70px 50px;
      border-radius: 10px;

      .bottom-check {
        display: flex;
        flex-direction: row;
        justify-content: left;

        img {
          width: 20px;
          height: 20px;
        }

        span {
          color: #202020;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
